// index.js
// 获取应用实例
const app = getApp();

Page({
  data: {
    motto: "Hello World",
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse("button.open-type.getUserInfo"),
    canIUseGetUserProfile: false,
    canIUseOpenData:
      wx.canIUse("open-data.type.userAvatarUrl") &&
      wx.canIUse("open-data.type.userNickName"), // 如需尝试获取用户信息可改为false
    turnplate: {
      //奖品名称
      restaraunts: [
        "天翼高清10元",
        "智能音箱",
        "智能台灯",
        "300元购机优惠券",
        "200元购机优惠券",
        "红包",
        "网易云音乐",
      ],

      //每个奖品区的背景色
      colors: [
        "#ffecd6",
        "#ffdcc5",
        "#ffecd6",
        "#ffdcc5",
        "#ffecd6",
        "#ffdcc5",
        "#ffecd6",
      ],
      //大转盘外圆的半径
      outsideRadius: 211/2,
      //大转盘奖品位置距离圆心的距离
      textRadius: 140,
      //大转盘内圆的半径
      insideRadius: 211 / 10,
      //开始角度，此转盘开始指在200元购机券
      startAngle: 7,
    },
  },
  onReady() {
    this.createCanvas();
  },
  getImageHtmlElement(canvas, url) {
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url, //仅为示例，并非真实的资源
        success(res) {
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
          if (res.statusCode === 200) {
            const image = canvas.createImage(res.tempFilePath);
            image.src = res.tempFilePath;
            image.onload = function () {
              resolve(image);
            };
          }
        },
      });
    });
  },
  createCanvas() {
    console.log("执行");
    const query = wx.createSelectorQuery();
    query
      .select("#myCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        //根据奖品个数计算圆周角度
        let arc = Math.PI / (this.data.turnplate.restaraunts.length / 2); // 奖品个数 /
        //在给定矩形内清空一个矩形
        ctx.clearRect(0, 0, 422, 422);
        //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
        ctx.strokeStyle = "#f5b599";
        ctx.font = "bold 10rpx Helvetica";
        for (let i = 0; i < this.data.turnplate.restaraunts.length; i++) {
          // 初始角度 + 第几个奖品的圆周角度
          let angle = this.data.turnplate.startAngle + i * arc;
          // 为当前奖品填充背景色
          ctx.fillStyle = this.data.turnplate.colors[i];
          ctx.beginPath();
          //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
          //canvas创建內圆（奖品区域）
          ctx.arc(
            211 / 2,
            211 / 2,
            this.data.turnplate.outsideRadius,
            angle,
            angle + arc,
            false
          );
          //旋转按钮的內圆
          ctx.arc(
            211 / 2,
            211 / 2,
            this.data.turnplate.insideRadius,
            angle + arc,
            angle,
            true
          );
          //绘制以定好的路径
          ctx.stroke();
          //填充当前的路径
          ctx.fill();
          //锁画布(为了保存之前的画布状态)
          ctx.save();

          //----绘制奖品开始----
          ctx.fillStyle = "#f3142d";
          //奖品名称
          let text = this.data.turnplate.restaraunts[i];

          //translate方法重新映射画布上的 (0,0) 位置
          ctx.translate(
            211 / 2 +
              Math.cos(angle + arc / 2) * this.data.turnplate.textRadius,
            211 / 2 + Math.sin(angle + arc / 2) * this.data.turnplate.textRadius
          );

          //rotate方法旋转当前的绘图
          ctx.rotate(angle + arc / 2 + Math.PI / 2);

          //在画布上绘制填色的文本。文本的默认颜色是黑色
          //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
          ctx.fillText(text, -ctx.measureText(text).width / 2, 211/1.5);
          //添加对应图标，根据奖品名称去绘制位置
          // let url =
          //   "https://static.hmemall.cn/upload/9998file1688715642-1131418048.png";
          //   let url2='https://static.hmemall.cn/upload/9998file1688715657-51512852.png'
          // if (text.indexOf("天翼") >= 0) {
          //   this.getImageHtmlElement(canvas, url).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("台灯") >= 0) {
          //   this.getImageHtmlElement(canvas, url2).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("音箱") >= 0) {
          //   this.getImageHtmlElement(canvas, url).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("200") >= 0) {
          //   this.getImageHtmlElement(canvas, url2).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("300") >= 0) {
          //   this.getImageHtmlElement(canvas, url).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("红包") >= 0) {
          //   this.getImageHtmlElement(canvas, url2).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // } else if (text.indexOf("网易") >= 0) {
          //   this.getImageHtmlElement(canvas, url).then((img) => {
          //     ctx.drawImage(img, -25, 10);
          //   });
          // }

          ctx.restore();
          //----绘制奖品结束----
        }
      });
  },
});
